<template>
	<div class="ywgzt-container">
		<title-banner :title="title">
			<el-select v-model="componentSelVal" placeholder="请选择告警分类" style="margin-right: 15px" @change="clearRouteParams">
				<el-option v-for="item in data" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
		</title-banner>
		<div class="content">
			<component :is="currentComponent" @changeComponent="changeCurrentComponentVal"></component>
		</div>
	</div>
</template>

<script setup name="HistoricalAlarm" lang="tsx">
import titleBanner from '../components/TitleBanner/index.vue';
import BaseAlarmServiceQuery from './baseAlarmServiceQuery/index.vue';
import AlarmServiceQuery from './alarmServiceQuery/index.vue';
import BusinessDetail from './businessDetail/index.vue';
import AlarmMergingAnalysis from './alarmMergingAnalysis/index.vue';
import AdvanceAlarm from './advanceAlarm/index.vue';
import { ref, reactive, shallowRef, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const activeTab = ref('bpmTab');
const title = ref('历史告警查询');
const componentSelVal = ref(Number(route.query.tabFlag) || 0);
const data = reactive([
	{ value: 0, label: '告警业务查询' },
	{ value: 1, label: '基础告警查询' },
	{ value: 2, label: '业务详单查询' },
	{ value: 3, label: '告警归并分析' },
	{ value: 4, label: '自定义告警查询' },
]);
let currentComponent = ref<any>(AlarmServiceQuery);
watch(
	() => componentSelVal.value,
	(val) => {
		changeCurrentComponent(val as number);
	}
);
function changeCurrentComponentVal(val: number) {
	componentSelVal.value = val;
}
function changeCurrentComponent(val: number) {
	if (val === 0) {
		currentComponent.value = AlarmServiceQuery;
	} else if (val === 1) {
		currentComponent.value = BaseAlarmServiceQuery;
	} else if (val === 2) {
		currentComponent.value = BusinessDetail;
	} else if (val === 3) {
		currentComponent.value = AlarmMergingAnalysis;
	} else if (val === 4) {
		currentComponent.value = AdvanceAlarm;
	}
}
function clearRouteParams() {
	if (route.query) {
		router.replace('/ops-workbench/historicalAlarmQuery/index?systemId=' + route.query.systemId);
	}
}
onMounted(() => {
	const router = useRouter();
	if (router.currentRoute.value.query.category === 'NPM') {
		activeTab.value = 'apmTab';
	} else {
		activeTab.value = 'bpmTab';
	}
});
</script>

<style rel="stylesheet/scss" lang="scss">
@import '@/styles/ops-workbench/common.scss';
@import '@/styles/ops-workbench/yd-table.scss';
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
@mixin box-back {
	background-color: #2a507d;
	border-radius: 10px;
}
.ywgzt-container {
	min-width: 1440px;
	min-height: 100vh !important;
}
:deep(.svg-icon) {
	width: 1.25rem;
}
</style>
